import React, { ReactNode, useState } from "react";
import ReactDOM from "react-dom";

import styles from "./StoPopup.module.scss";

interface IProps {
  title?: string;
  children: ReactNode;
  onConfirm: () => void;
  closePopup: () => void;
}

const StoPopup: React.FC<IProps> = ({
  title = "默认标题",
  children,
  onConfirm,
  closePopup,
}) => {
  const popupRoot = document.getElementById("root");

  return ReactDOM.createPortal(
    // JSX
    <div className={styles.mask}>
      {/* 弹窗内容 */}
      <div className={styles.modal}>
        {/* 标题区 */}
        <div className={styles.title}>
          {title}
          <button onClick={closePopup} className={styles.btnClose}>
            X
          </button>
        </div>

        {/* 内容区 */}
        <div className={styles.content}>{children}</div>

        {/* 按钮区 */}
        <div className={styles.btns}>
          <button onClick={closePopup}>取消</button>

          <button
            onClick={() => {
              closePopup();
              onConfirm();
            }}
          >
            确定
          </button>
        </div>
      </div>
    </div>,

    // 要传送的目标位置
    popupRoot as Element
  );
  
};

export default StoPopup;
